import React, { useEffect, useState } from "react";
import { Row, Col, Icon } from "antd";
import CountUp from "react-countup";
import "./index.css";
import { reqAll } from "../../../../api/all";

const PanelGroup = (props) => {
    const [chartList, setChartList] = useState([
        // {
        //     type: "用户数",
        //     icon: "user",
        //     num: 102400,
        //     color: "#40c9c6",
        // },
        // {
        //     type: "建议数",
        //     icon: "message",
        //     num: 8122,
        //     color: "#36a3f7",
        // },
        // {
        //     type: "总点赞数",
        //     icon: "like",
        //     num: 92850,
        //     color: "#f4516c",
        // },
        // {
        //     type: "总收藏数",
        //     icon: "heart",
        //     num: 13600,
        //     color: "#f6ab40",
        // },
    ]);
    useEffect(() => {
        reqAll().then((r) => {
            // console.log(r);
            setChartList([
                {
                    type: "用户数",
                    icon: "user",
                    num: r.allUser,
                    color: "#40c9c6",
                },
                {
                    type: "建议数",
                    icon: "message",
                    num: r.allSuggestion,
                    color: "#36a3f7",
                },
                {
                    type: "总点赞数",
                    icon: "like",
                    num: r.allPraise,
                    color: "#f4516c",
                },
                {
                    type: "总收藏数",
                    icon: "heart",
                    num: r.allCollect,
                    color: "#f6ab40",
                },
            ]);
            // console.log(chartList);
        });
    }, []);

    return (
        <div className="panel-group-container">
            <Row gutter={40} className="panel-group">
                {chartList.map((chart, i) => (
                    <Col key={i} lg={6} sm={12} xs={12} className="card-panel-col">
                        <div className="card-panel">
                            <div className="card-panel-icon-wrapper">
                                <Icon
                                    className={chart.type}
                                    style={{ fontSize: 55, color: chart.color }}
                                    type={chart.icon}
                                />
                            </div>
                            <div className="card-panel-description">
                                <p className="card-panel-text">{chart.type}</p>
                                <CountUp end={chart.num} start={0} className="card-panel-num" />
                            </div>
                        </div>
                    </Col>
                ))}
            </Row>
        </div>
    );
};

export default PanelGroup;
